<template>
	<view class="container">
		<view class="order-tab">
			<tab-bar :current="current" :values="items" @clickItem="onClickItem"></tab-bar>
		</view>
		<view class="content">
			<!-- 全部 -->
			<view v-if="current === 0">
				<view v-for="(item, index) in lists.ALL" :key="index">
					<order-item :data="item" @clickItem="orderClick"></order-item>
				</view>
				<view class="loading-more" v-if="isLoading.ALL">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</view>
			<!-- 待缴费 -->
			<view v-if="current === 1">
				<view v-for="(item, index) in lists.UNPAID" :key="index">
					<order-item :data="item" @clickItem="orderClick"></order-item>
				</view>
				<view class="loading-more" v-if="isLoading.UNPAID">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</view>
			<!-- 已报名 -->
			<view v-if="current === 2">
				<view v-for="(item, index) in lists.REGISTERED" :key="index">
					<order-item :data="item" @clickItem="orderClick"></order-item>
				</view>
				<view class="loading-more" v-if="isLoading.REGISTERED">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</view>
			<!-- 已退款 -->
			<view v-if="current === 3">
				<view v-for="(item, index) in lists.REFUNDED" :key="index">
					<order-item :data="item" @clickItem="orderClick"></order-item>
				</view>
				<view class="loading-more" v-if="isLoading.REFUNDED">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderItem from './orderItem.vue'
	import {getRegistrationList} from '@/http/api.js'
	export default {
		components: {
			orderItem
		},
		data() {
			return {
				current: 0, // 现在tab页
				items: [`全部`, '待缴费', '已报名', '已退款'], // tab列表
				hasShow: [false, false, false, false], // 是否已点击过tab，用于数据加载判断
				statusList: {
					0: 'ALL',
					1: 'UNPAID',
					2: 'REGISTERED',
					3: 'REFUNDED'
				}, // 对应状态名称
				lists: {
					ALL: [], // 全部订单
					UNPAID: [], // 待缴费列表
					REGISTERED: [], // 已报名列表
					REFUNDED: [] // 已退款列表
				},
				pageCount: { // 现在页数
					ALL: 1,
					UNPAID: 1,
					REGISTERED: 1,
					REFUNDED: 1
				},
				loadingText: '加载中',
				isLoading: { // 是否需要加载更多
					ALL: false,
					UNPAID: false,
					REGISTERED: false,
					REFUNDED: false
				},
				pageSize: 10 // 每页加载数据数量
			}
		},
		onLoad(e) {
			// 获取选中tab，并加载数据
			this.current = Number(e.current || 0)
			this.hasShow[this.current] = true
			this.getList(1, this.statusList[this.current])
		},
		onReachBottom() {
			// 判断对应tab，下拉加载数据
			const type = this.statusList[this.current]
			if (this.isLoading[type]) {
				this.pageCount[type]++;
				this.getList(this.pageCount[type], type)
			}
		},
		methods: {
			// 点击tab事件
			onClickItem(e) {
				// 赋值current，选中tab
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				// 判断tab是否已经加载过，如果没有获取第一页数据
				if (!this.hasShow[e.currentIndex]) {
					this.hasShow[e.currentIndex] = true
					// 加载对应数据
					// 获取我的报名列表 /market/personalCenter/pageMyRegistration status:REGISTERED, UNPAID, REFUNDED
					this.getList(1, this.statusList[e.currentIndex])
				}
			},
			// 获取分页数据， page：当前页 type：当前tab类型
			getList(page, type) {
				this.isLoading[type] = true
				let param = {
					current: page,
					size: this.pageSize
				}
				// 如果不是全部订单，要传status值
				if (type !== 'ALL') {
					param = {
						...param,
						status: type
					}
				}
				if (page === 1) {
					uni.showLoading({
						title: "加载中"
					})
				}
				this.$request({
					url: getRegistrationList,
					data: param
				}).then((res) => {
					// 请求得到的数据添加在对应list数据之后
					this.lists[type] = {
						...this.lists[type],
						...res.records
					}
					if (res.records.length < this.pageSize) {
						this.isLoading[type] = false;
					}

				}).catch(err => {
					console.log(err)
					this.isLoading[type] = false
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 订单点击，跳转详情页面
			orderClick(data) {
				// 课程跳转detail.vue
				if (data.type === 'course') {
					uni.navigateTo({
						url: `/pages/user/order/detail?id=${data.id}`
					})
				} else if (data.type === 'activity') { // 活动跳转活动详情页
				    const content = {
						id: data.activityId,
						type: 'activity'
					}
					uni.navigateTo({
						url: `/pages/activity/detail/index?content=${encodeURIComponent(JSON.stringify(content))}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './order.scss';
</style>
